<template>
  <div>
    <Card>
      <EchartsChart :option="barOption"></EchartsChart>
    </Card>
    <Card>
      <EchartsChart :option="lineOption"></EchartsChart>
    </Card>
    <Card>
      <EchartsChart :option="pieOption"></EchartsChart>
    </Card>
  </div>
</template>

<script>
export default {
  name: 'Left',
}
</script>

<script setup>
import EchartsChart from '@/components/EchartsChart/index.vue'
import Card from '@/components/Card/index.vue'
import { onMounted, reactive} from 'vue';


const barOption = reactive({
  xAxis: {
    data: [],
  },
  series: [
    {
      name: '程序员数量',
      type: 'bar',
      data: [],
      barWidth: '40%'
    }
  ],
  title: {
    text: '各行业程序员数量',
  },
  legend: {
    show: false
  }
})

const lineOption = reactive({
  xAxis: {
    data: [],
  },
  series: [
    {
      name: '新增项目',
      type: 'line',
      data: [],
      smooth: true, // 光滑的
    },
    {
      name: '新增技能',
      type: 'line',
      data: [],
      smooth: true, // 光滑的
    },
  ],
  title: {
    text: '学习变化',
  },
  legend: {}
})

const pieOption = reactive({
  // 隐藏x/y轴
  xAxis: {
    show: false
  },
  yAxis: {
    show: false
  },
  series: [
    {
      name: '年龄分布',
      type: 'pie',
      data: [],
      radius: ['45%', '60%'],
      // 隐藏 文本和引导线
      label: {
        show: false
      },
    },
  ],
  title: {
    text: '工程师年龄分布',
  },
  legend: {
    top: 'auto',
    bottom: 0,
    left: 'center',
    itemWidth: 5,
    textStyle: {

    }
  },
  tooltip: {
    trigger: 'item', // pie必须是此值
    formatter: (params) => {
      // console.log(params)
      const {seriesName, marker, name, value, percent} = params
      return `
        ${seriesName}<br>
        ${marker}${name}: ${value}(${percent}%)
      `
    }
  }
})

// 挂载时初始化渲染图表
onMounted(() => {
  // 模拟异步请求获取数据
  setTimeout(() => {
    const result = {
      xAxisData: [
        '旅游行业',
        '游戏行业',
        '电商行业',
        '医疗行业',
        '金融行业',
        '教育培训',
        '餐饮行业',
      ],
      seriesData: [300, 200, 400, 250, 550, 450, 350],

      lineXaxis: [
        '1月',
        '2月',
        '3月',
        '4月',
        '5月',
        '6月',
        '7月',
        '8月',
        '9月',
        '10月',
        '11月',
        '12月',
      ],
      line1SeriesData: [
        300, 200, 400, 250, 550, 450, 300, 200, 400, 250, 550, 450,
      ],
      line2SeriesData: [
        250, 550, 450, 300, 200, 400, 250, 550, 450, 300, 200, 400,
      ],
      pieSeriesData: [
        {
          name: '20岁以下',
          value: 11,
        },
        {
          name: '20-29岁',
          value: 22,
        },
        {
          name: '30-39岁',
          value: 33,
        },
        {
          name: '40-49岁',
          value: 44,
        },
        {
          name: '50岁以上',
          value: 55,
        },
      ],
    }
    // 更新状态
    barOption.xAxis.data = result.xAxisData
    barOption.series[0].data = result.seriesData

    lineOption.xAxis.data = result.lineXaxis
    lineOption.series[0].data = result.line1SeriesData
    lineOption.series[1].data = result.line2SeriesData

    pieOption.series[0].data = result.pieSeriesData
  }, 1000);
})



</script>

<style scoped lang="scss">
  
</style>
